<template>
  <div class="right-boxs">
    <div class="btm-item-parent-box">
      <div
        v-for="(item, index) in tabList"
        :key="item.id"
        class="btm-item-parent"
        :class="{
          'btm-item-lock': !item.isShow,
        }"
      >
        <div
          @click="pathPublish(item.id, item.isShow)"
          class="btm-item"
          :style="{}"
          :class="{
            'btm-item-null': index == 0,
          }"
        >
          <div class="btm-icon">
            <iconTab :id="item.id" />
          </div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import iconTab from './iconTab.vue';
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { settings } from '@/api/project/project';

import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { ImgUrlCancat } from '@/utils/minxin';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const emit = defineEmits(['setEmitCruuent']);
const { tabvalue } = storeToRefs(store);
const tabList = ref([]);
const initSetting = async () => {
  try {
    let arry = [];
    tabList.value = [
      { name: '展品图库', isShow: true, id: 1 },
      { name: '留言板', isShow: true, id: 2, isActive: 2 },
    ];
  } catch {}
};
initSetting();

const pathPublish = (e: number, show: boolean) => {
  if (!show) {
    return;
  }
  emit('setEmitCruuent', e, show);
};
watch(
  () => tabvalue,
  () => {
    initSetting();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.right-boxs {
  // position: fixed;
  // top: 280px;
  // right: 0;
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  // background-image: url('//static.jiyi.show/template/template5/wap/rightNavBG.png');
  // box-shadow: -4px 0px 10px 0px rgba(194, 194, 194, 0.1);
  // border-radius: 8px;
  padding: 0 25px;
  > div {
    height: 100%;
    // margin: 0 16px;
    // background: #cbb995;
  }
}
.btm-item-parent-box {
  width: 100%;
  display: flex;
  align-items: center;
}
.btm-item-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.btm-item {
  display: flex;
  align-items: center;
  width: auto;
  padding: 13px 0;
  // opacity: 0.5;
  // border-top: 1px solid #443c2e;
  span {
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(162, 70, 60, 1);
  }
}
.btm-item-homeIcon {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 31px;
  padding: 13px 0;
  span {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }
}
.btm-icon {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 4px;
  :deep(.iconfonts) {
    font-size: 24px !important;
    color: rgba(162, 70, 60, 1);
  }
  :deep(.freeIcon) {
    font-size: 24px !important;
    color: rgba(162, 70, 60, 1);
  }
  img {
    width: 24px;
    height: 24px;
  }
}
.btm-item-null {
  margin-left: 0px;
  border-top: none;
}
.btm-item-lock {
  // opacity: 0.5;
  display: none !important;
}
.btm-item-active {
}
.border {
  width: 1px;
  height: 40px !important;
  background: rgba(250, 250, 250, 0.5);
}
</style>
